
<!-- 这个组件的template 模板部分 -->
<template>
  <!-- <div>我是根组件--{{ msg }}</div>
    <p @click="addCount">count:{{ count }}</p>
    <p>计算属性-{{ doubleCount }}</p>
  -->

  <!-- 使用part 组件 -->
  <part :count='count' :msg="msg" @myevent="getdatafrompart"></part>
  <button @click="gudong = '仿元青花'">修改古董</button>
  <button @click="count++">修改count</button>
</template>

<script>
// 引入定义的part 组件
import Part from './components/Part.vue'
import { computed } from 'vue';
export default {
  // 定义当前组件中的数据
  data() {
    return {
      msg: 'yyds',
      count: 100,
      gudong: '元青花',
    }
  },
  // 祖先组件需要提供的数据
  provide() {
    return {
      // 如果后代组件获取的数据希望是响应式的数据, 当祖先组件中的数据改变时,后代拿到的数据
      // 也希望是变化的, 那么在传递是, 使用计算属性包裹该提供的数据
      gudong: computed(() => this.gudong)
    }
  },
  methods: {
    addCount() {
      this.count++
    },
    getdatafrompart(data) {
      console.log('data', data);
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    }
  },
  watch: {

  },
  components: {
    part: Part
  }
}
</script>

<style scoped></style>
